<template>
  <el-table
    ref="table"
    :data="tableData"
    border
    fit
    highlight-current-row
    :span-method="objectSpanMethod"
    :style="'width:' + width + '%;'"
    :max-height="maxHeight"
  >
    <el-table-column
      ::sortable="sortable"
      prop="weekAge"
      label="周龄"
      align="center"
      fixed="left"
    />
    <el-table-column
      ::sortable="sortable"
      prop="date"
      label="日期"
      align="center"
    />
    <el-table-column
      ::sortable="sortable"
      prop="dayAge"
      label="日龄"
      align="center"
      width="60"
    />
    <el-table-column
      label="鸡数(只)"
      align="center"
    >
      <el-table-column
        :sortable="sortable"
        label="死"
        align="center"
      >
        <template slot-scope="{row}"><el-tag
            v-if="row.death"
            type="danger"
            effect="dark"
          >{{ row.death
        }}</el-tag></template>
      </el-table-column>
      <el-table-column
        :sortable="sortable"
        prop="out"
        label="淘"
        align="center"
      >
        <template slot-scope="{row}"><el-tag
            v-if="row.out"
            type="warning"
            effect="dark"
          >{{ row.out
        }}</el-tag></template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      :sortable="sortable"
      prop="inventory"
      label="存栏"
      align="center"
      width="60"
    />
    <el-table-column
      :sortable="sortable"
      prop="feedIntakePerDay"
      label="当日投料/kg"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="feedConsumption"
      label="耗料(只/g)"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="accumulatedFeedIntake"
      label="累计投料/kg"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="waterIntakePerDay"
      label="当日饮水/kg"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="averageWaterIntakePerDay"
      label="日均饮水(只/ml)"
      align="center"
    />
    <template v-if="isShow">
      <el-table-column
        :sortable="sortable"
        prop="numberOfEggsProduced"
        label="产蛋数(枚)"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="accumulatedNumberOfEggs"
        label="累计蛋数(枚)"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="eggProductionRate"
        label="产蛋率"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="totalEggWeight"
        label="总蛋重(kg)"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="accumulatedEggWeight"
        label="累计蛋重(kg)"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="averageEggWeight"
        label="均蛋重(g)"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="feedToEggRatio"
        label="料蛋比"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="numberOfBrokenEggs"
        label="破蛋(枚)"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="eggBreakageRate"
        label="破蛋率(%)"
        align="center"
      />
    </template>
    <el-table-column
      :sortable="sortable"
      prop="targetTemperature"
      label="目标温度℃"
      align="center"
    />
    <el-table-column
      label="舍温℃"
      align="center"
    >
      <el-table-column
        :sortable="sortable"
        prop="morning"
        label="早"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="afternoon"
        label="中"
        align="center"
      />
      <el-table-column
        :sortable="sortable"
        prop="evening"
        label="晚"
        align="center"
      />
    </el-table-column>
    <el-table-column
      :sortable="sortable"
      prop="humidity"
      label="湿度"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="operationLog"
      label="操作日志"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="medication"
      label="用药"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="vaccination"
      label="疫苗"
      align="center"
    />
    <el-table-column
      :sortable="sortable"
      prop="weather"
      label="天气"
      align="center"
    />
    <el-table-column
      fixed="right"
      label="操作"
      width="180"
    >
      <template slot-scope="scope">
        <el-button
          @click="handleClick(scope.row)"
          type="text"
          size="small"
        >查看</el-button>
        <el-button
          type="text"
          size="small"
          @click="modify(scope.row)"
        >编辑</el-button>
        <el-button
          @click="add(scope.row)"
          type="text"
          size="small"
        >增加</el-button>
        <el-button
          type="text"
          size="small"
          @click="Delete(scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "BaseTable",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    maxHeight: {
      type: String,
      default: "525",
    },
    width: {
      type: String,
      default: "100",
    },
    sortable: {
      type: Boolean,
      default: false,
    },
  },
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 7 === 0) {
          return {
            rowspan: 7,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    add(row) {},
    Delete(row) {
      this.$confirm("确定删除??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    modify(row) {},
    handleClick(row) {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table thead.is-group th,
td,
tr {
  font-size: 15px;
  font-weight: 600;
  color: black;
}

/* ::v-deep .el-table__body tr.current-row > td{
  background-color: rgb(28, 126, 192);
  color: white;
} */
::v-deep .el-table__body tr.current-row > td:first-child {
  background-color: white;
}

.sort-caret.ascending {
  border-bottom-color: #9d9d9d57;
}

.sort-caret.ascending {
  border-bottom-color: #84848462;
}

::v-deep th.gutter {
  width: 0;
  display: none;
}
</style>
